<template>
	<view>
		<view class="header">
			<view class="text1">
				忘记密码
			</view>
			<view class="text2">
				填写信息重置密码
			</view>
		</view>
		<view class="formWrap">
			<view class="phone row a-center">
				<!-- <view class="icon row j-center">
					<image src="../../static/login/phone.png" style="width: 34rpx;height: 46rpx;" mode=""></image>
				</view> -->
				<view class="ipt flex-1">
					<uni-easyinput @blur="mobileBlur" type="number" :styles="{borderColor: '#F4F8FB',height: '100px',}"
						v-model="mobile" placeholder="请输入你的手机号码"></uni-easyinput>
				</view>
				<view class="errMsgPhone" type="number" v-if="errMsgPhone">
					请输入合法手机号
				</view>
			</view>
			<view class="phone row a-center" v-if="type === 'code'">
				<!-- <view class="icon row j-center">
					<image src="../../static/login/pwd.png" style="width: 40rpx;height: 41rpx;" mode=""></image>
				</view> -->
				<view class="ipt flex-1">
					<uni-easyinput @blur="codeBlur" type="number" :styles="{borderColor: '#F4F8FB',height: '100px',}" v-model="code"
						placeholder="请输入验证码"></uni-easyinput>
				</view>
				<view class="sendCode row a-center">
					<button size="mini" plain="true" :disabled="isSending"
						@click="sendVerificationCode">{{buttonText}}</button>
				</view>
				<view class="errMsgPhone" v-if="errMsgCode">
					请输入验证码
				</view>
			</view>
			<view class="phone row a-center">
				<!-- <view class="icon row j-center">
					<image src="../../static/login/phone.png" style="width: 34rpx;height: 46rpx;" mode=""></image>
				</view> -->
				<view class="ipt flex-1">
					<uni-easyinput @blur="newPwdBlur" type="number" :styles="{borderColor: '#F4F8FB',height: '100px',}"
						v-model="newPwd" placeholder="请设置新密码"></uni-easyinput>
				</view>
				<view class="errMsgPhone" type="number" v-if="errMsgPwd">
					密码长度应为6到18位
				</view>
			</view>
			<view class="phone row a-center">
				<!-- <view class="icon row j-center">
					<image src="../../static/login/phone.png" style="width: 34rpx;height: 46rpx;" mode=""></image>
				</view> -->
				<view class="ipt flex-1">
					<uni-easyinput @blur="confirmPwdBlur" type="number" :styles="{borderColor: '#F4F8FB',height: '100px',}"
						v-model="confirmPwd" placeholder="请确认新密码"></uni-easyinput>
				</view>
				<view class="errMsgPhone" type="number" v-if="errMsgPwdTwo">
					请确认两次输入一致
				</view>
			</view>
			<view class="row j-center">
				<view class="login row j-center a-center" @click="loginApp">
					确认重置
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onBeforeMount } from 'vue'
	import { onShareAppMessage, onShareTimeline} from '@dcloudio/uni-app'
	import { request } from '@/utils'
	import { useStore } from '@/stores/user';
	const user = useStore()
	// import { onReady, onLoad } from '@dcloudio/uni-app'
	const statusHeight = ref<number>()
	const mobile = ref('')
	const code = ref('')
	const newPwd = ref('')
	const confirmPwd = ref('')
	const type = ref('code')
	const errMsgPhone = ref(false)
	const errMsgCode = ref(false)
	const errMsgPwd = ref(false)
	const errMsgPwdTwo = ref(false)
	onBeforeMount(() => {
		uni.getSystemInfo({
			success: (res) => {
				statusHeight.value = res.statusBarHeight
			}
		})
	})
	onShareAppMessage(():any => {
		// if (res.from === 'button') {// 来自页面内分享按钮
		//   console.log(res.target)
		// }
		// return {
		//   title: '中旭安全云',
		// }
	})
	const isSending = ref(false)
	const buttonText = ref('获取验证码')
	const timer = ref(null)
	const countdown = ref(0)
	const sendVerificationCode = async () => {
		if (isSending.value) return; // 防止重复点击
		const res : any = await request('api/v1/getSmsCode', { mobile: mobile.value }, 'GET')
		if (res.data.code === 1000) {
			uni.showToast({
				title: '验证码已发送'
			})
			isSending.value = true
			countdown.value = 60;
			buttonText.value = `${countdown.value}秒后重新获取`
			timer.value = setInterval(() => {
				countdown.value--;
				if (countdown.value === 0) {
					clearInterval(timer.value);
					isSending.value = false;
					buttonText.value = '获取验证码';
				} else {
					buttonText.value = `${countdown.value}秒后重新获取`;
				}
			}, 1000);
		} else {
			uni.showToast({
				title: '获取验证码失败',
				icon: 'error'
			})
		}
		// console.log(res);
		// setTimeout(() => {
		// 	// 发送请求，获取验证码
		// 	console.log('验证码已发送');
		// }, 2000);
	}
	const loginApp = async () => {
		const regMobile = /^1[3456789]\d{9}$/
		if (!regMobile.test(mobile.value)) {
			errMsgPhone.value = true
			return 
		}
		if(!code.value) {
			errMsgCode.value = true
			return
		}
		const regex = /^.{6,18}$/;
		if (!regex.test(newPwd.value)) {
			errMsgPwd.value = true
			return
		}
		if(newPwd.value !== confirmPwd.value) {
			errMsgPwdTwo.value = true
			return
		} 
		const res:any = await request('api/v1/resetAppPwd',{ mobile: mobile.value, code: code.value, newPwd: newPwd.value, confirmPwd: confirmPwd.value }, 'POST')
		console.log(res)
		if(res.data.code !== 1000) {
			uni.showToast({
				title: res.data.message,
				icon: 'error'
			})
		} else {
			uni.showToast({
				title: '重置成功, 请前往登录',
				icon: 'success'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}, 300)
		}
		
		// user.login({ mobile: mobile.value, code: code.value, type: type.value }).then((res : any) => {
		// 	if(res.data.code !== 1000) {
		// 		uni.showToast({
		// 			title: res.data.message,
		// 			icon: 'error'
		// 		})
		// 	} else {
		// 		uni.switchTab({
		// 			url: '/pages/index/index'
		// 		})
		// 	}
		// })
	}
	const mobileBlur = () => {
		console.log(mobile.value);
		const regMobile = /^1[3456789]\d{9}$/
		if (!regMobile.test(mobile.value)) {
			errMsgPhone.value = true
		} else {
			errMsgPhone.value = false
		}
	}
	const codeBlur = () => {
		if(!code.value) {
			errMsgCode.value = true
		} else {
			errMsgCode.value = false
		}
	}
	const newPwdBlur = () => {
		const regex = /^.{6,18}$/;
		if (regex.test(newPwd.value)) {
			errMsgPwd.value = false
		} else {
			errMsgPwd.value = true
		}
	}
	const confirmPwdBlur = () => {
		if(newPwd.value !== confirmPwd.value) {
			errMsgPwdTwo.value = true
		} else {
			errMsgPwdTwo.value = false
		}
	}
	const changeType = () => {
		code.value = ''
		type.value = type.value === 'password' ? 'code' : 'password'
	}
	const goResetPwd = () => {
		uni.navigateTo({
			url: `/pages/resetPwd/resetPwd`
		})
	}
</script>

<style scoped lang="scss">
	button {
		border: none;
	}
	
	.header {
		padding: 160rpx 72rpx 0rpx 72rpx;
		.text1 {
			font-size: 52rpx;
			color: #333333;
			font-weight: bold;
		}
		.text2 {
			font-size: 24rpx;
			color: #8E8E93;
			font-weight: bold;
			margin-top: 28rpx;
		}
	}

	.formWrap {
		background-color: #fff;
		height: 50vh;
		// position: relative;
		// top: -52px;
		border-radius: 24rpx;
		padding: 140rpx 64rpx;

		.phone {
			// border: 1px solid #F2F3F3;
			height: 108rpx;
			// background-color: #F4F8FB;
			border-radius: 22rpx;
			margin-bottom: 40rpx;
			position: relative;
			padding-left: 20rpx;

			.icon {
				width: 120rpx;
			}

			.ipt {
				padding-right: 20rpx;
			}

			.sendCode {
				width: 260rpx;
				// border-left: 1px solid #8E8E93;
				color: #8E8E93;
				text-align: center;
				font-size: 24rpx;
				button {
					color: #3665FF;
				}
			}

			.errMsgPhone {
				position: absolute;
				bottom: -25rpx;
				left: 40rpx;
				color: #f56c6c;
				font-size: 24rpx;
				letter-spacing: 3rpx;
			}
		}
		.mode {
			font-size: 24rpx;
			color: #555A5E;
			font-weight: bold;
			margin-top: 28rpx;
			.line {
				border: 1px solid #8E8E93;
				margin: 0 40rpx;
				height: 34rpx;
			}
		}
	}

	.login {
		height: 100rpx;
		background: linear-gradient(180deg, #2986F6 0%, #6FABFC 100%);
		box-shadow: 0px 6px 6px rgba(51, 173, 255, 0.16);
		width: 70%;
		border-radius: 50rpx;
		font-size: 34rpx;
		color: #ffffff;
		margin-top: 50rpx;
	}
</style>